<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
</head>

<body>

    <h1>欢迎用户进入登录页面</h1>
    <span>用户名：</span><input type="text" name="userName" id="userName"><br>
    <span>密 码：</span><input type="text" name="password" id="password"><br>
    <!-- <input type="button" value="登录" onclick="login()">    -->
    <input type="button" value="登录" onclick="login()">


    <script src="./jquery-3.7.1.min.js"></script>
    <script>
        function login() {
            // 使用ajax:下面就是固定格式ajax请求
            $.ajax({
                type: "post",
                url: "/user/login",
                data: {
                    //从输入框中拿值，通过id
                    "userName": $("#userName").val(),
                    "password": $("#password").val(),
                },
                //后端返回成功后
                success: function (body) {
                    //body就是后端返回的数据：此处是布尔类型
                    if (body) {
                        //登录成功，跳转页面
                        location.href = "index.html";
                    } else {
                        alert("密码或者用户名错误");
                    }
                }
            });
        }
    </script>

</body>

</html>